<!--模板-->
<template id="login_index">
    <div class="login_container">
        <div class="login_box">
            <!-- 头部区域 -->
            <div class="avatar_box">
                <img class="log_head" src="../assets/logo.png" alt="">
            </div>
            <!-- Element ui组件：表单登录区域  rules:表单验证-->
           <el-form  :model="loginForm" :rules="loginFormRules" class="login_form" ref="loginFormRef">
               <!-- 用户名 -->
                <el-form-item   prop="username">
                     <el-input class="elinput"  v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item   prop="password">
                     <el-input class="elinput"  v-model="loginForm.passWord" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <!-- 登录/注册 -->
                  <el-form-item class="btns">
                    <el-button  @click="login()" type="primary">登录</el-button>
                    <el-button  @click="regist()" type="primary">注册</el-button>
                    <el-button @click="loginFormRef()"  type="info">重置</el-button>
                </el-form-item>
            </el-form> 
        </div>
    </div>
</template>
<!--逻辑-->
<script>
export default {
    name:'login_index',
    /* 挂在输入框数据 */
  data() {
      /* 将form 数据挂载到v-model中 */
      return {
        loginForm: {
          username: '',
          password:'12345678'
        },
        loginFormRules:{
            username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
                { min: 3, max: 12, message: '长度在5到60个字符', trigger: 'blur' }
             ],
            password:[
                {required:true,message:'请输入密码',trigger:'blur'},
                { min:3, max:15, message: '长度在5到12个字符', trigger: 'blur' }
            ]
        }
      }
    },
    methods: {
         loginFormRef() {//重置表单密码隐藏
          this.$refs.loginFormRef.resetFields();
      },
       login(){
          
           this.$refs.loginFormRef.validate(async valid =>{//输入信息校验
                if(!valid) return;
                //链接到后台
                const {data:res} =await this.$http.post("/users/login",this.loginForm);
            //    this.$http.post("/users/login",{
            //        username:this.loginForm.username,
            //        password:this.loginForm.password
            //    }).then(res => {
            //        console.log(res.data)
            //    });

                if(res.status == 0){
                     console.log(res.data)
                    this.$router.push("/home")
                    window.sessionStorage.setItem("user",res.data);//将后台user数据存储到session中
                }else{
                  alert("操作失败")
                }
           });
       },
       regist(){
           //路由重定向到注册页面
           this.$router.push("/registry");
       }
    }
}
</script>
<!--样式 scoped:控制样式生效区间；less:less指令-->
<style lang="less" scoped>
.login_container{
    background-image: url(../assets/index.jpg) ;
    background-color:#3e6391;
    height: 100%; 
    background-size:100% 99%;
    }
/* translate:位移 函数*/
.login_box{
    width: 550px;
    height:350px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding-left: 0;
/* 语法嵌套 transform:translate(-50%);减去自身宽度的一半*/
.avatar_box{
    height:130px;
    width:130px;
    border:1px solid #eee;
    border-radius: 50%;
    padding:5px;
    box-shadow:0 0 10px #ddd;
    position: absolute;left:50% ;
    transform:translate(-50%,-50%);
    background-color: #fff;
    img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgb(6, 86, 110);}
    }
}
.btns{
    display: flex;
    justify-content: flex-end;//尾部对齐
}
.login_form{
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding:0 20px 20px 20px;
    box-sizing: border-box;//盒中盒
}
</style>